<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>

    <!-- <script src="../js/vue.js"></script> -->

    <script>
      function Vue(options) {
        this._data = options.data;
        this._proxy()
        this._initMethods(options.methods)
      }

      Vue.prototype = {

        _initMethods(methods){
            Object.keys(methods).forEach(key=>{
                this[key] = methods[key].bind(this)
            })
        },

        _proxy() {
          Object.keys(this._data).forEach((key) => {
            Object.defineProperty(this, key, {
              get() {
                console.log("111");
                return this._data[key];
              },
              set(value) {
                console.log("222");
                this._data[key] = value;
              },
            });
          });
        },
      };
    </script>

    <script>
      const vm = new Vue({
        data: {
            msg:'abc'
        },
        methods:{
            fun(){
                console.log(this.msg);
            }
        }
      });
      vm.fun()
    </script>
  </body>
</html>
